<!-- 安全管理-历史缺失页面 -->
<template>
  <div>
    <div v-show="isMain" class="equip-wrap-common" style="padding-top: 24px">
      <px-button style="margin-bottom: 8px" type="primary" icon="ArrowLeft" @click="backToDefect">返回缺失管理</px-button>
      <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 254px)" border>
        <px-table-column label="序号" width="80" align="center" fixed="left">
          <template #default="{ $index }">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
          </template>
        </px-table-column>
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <px-button v-if="item.missingId && showRowText('ALL_SAFEMANAGE_HISTORYDEFECT_VIEW')" link type="primary" @click="handleView(scope.row)">
              {{ scope.row.missingId }}
            </px-button>
            <span v-else-if="item.missingId && !showRowText('ALL_SAFEMANAGE_HISTORYDEFECT_VIEW')">{{ scope.row.missingId }}</span>
            <span v-else-if="item.missingDesc">
              <px-tooltip placement="top" :content="scope.row.missingDesc">
                <div class="table-ellipsis">{{ scope.row.missingDesc }}</div>
              </px-tooltip>
            </span>
            <span v-else-if="item.missingLevel">
              {{ scope.row.missingLevelDesc || "-" }}
            </span>
            <span v-else-if="item.reportTime">
              <span v-if="scope.row.reportTime">{{ scope.row.reportTime.split(" ")[0] }}</span>
              <span v-else>-</span>
            </span>
            <span v-else-if="item.rectifyTime">
              <span v-if="scope.row.rectifyTime">{{ scope.row.rectifyTime.split(" ")[0] }}</span>
              <span v-else-if="scope.row.delayRectifyTime">{{ scope.row.delayRectifyTime.split(" ")[0] }}</span>
              <span v-else-if="scope.row.planRectifyTime">{{ scope.row.planRectifyTime.split(" ")[0] }}</span>
              <span v-else>-</span>
            </span>
            <span v-else-if="item.missingPictureList" style="display: flex">
              <img
                v-for="(file, index) in scope.row.missingPictureList || []"
                :key="index"
                style="width: 28px; height: 28px; margin-right: 8px; cursor: pointer"
                :src="file.url || file.fileUrl"
                alt=""
                @click="photoPreview(scope.row.missingPictureList, file)"
              />
            </span>
            <span v-else-if="item.rectifyStatus">
              <px-tag
                v-if="scope.row.rectifyStatus"
                effect="plain"
                :style="{
                  color: `${tagColorList[scope.row.rectifyStatus]}`,
                  border: `1px solid ${tagBorderColorList[scope.row.rectifyStatus]}`,
                  backgroundColor: `${tagBgColorList[scope.row.rectifyStatus]}`
                }"
              >
                {{ scope.row.rectifyStatusDesc }}
              </px-tag>
              <span v-else>-</span>
            </span>
            <span v-else>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" width="180" align="center">
          <template #default="scope">
            <!-- 详情 -->
            <px-tooltip content="详情" placement="top">
              <px-button v-has="'ALL_SAFEMANAGE_HISTORYDEFECT_VIEW'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="equip-table-pagination"
        :total="total"
        @pagination="queryTable"
      />
      <px-image-viewer v-if="photoShow" hide-on-click-modal :draggable="false" :url-list="viewerPhotoList" @close="photoShow = false" />
    </div>
    <!-- 详情查看页面 -->
    <ViewDefectDetail
      :isMain="isMain"
      :isView="isView"
      :userId="userId"
      :reportUserName="reportUserName"
      :missingId="missingId"
      :missingLevelList="missingLevelList"
      :missingTypeList="missingTypeList"
      :missingResourceList="missingResourceList"
      :rectifyStatusList="rectifyStatusList"
      @backMainPage="backMainPage"
      @queryTable="queryTable"
    />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_SAFEMANAGE_HISTORYDEFECT"
});
import { onMounted, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import ViewDefectDetail from "../defect/components/ViewDefectDetail.vue";
import { getEmployeeIdAndName, showRowText } from "@/utils/pengxi";
import { queryDefect, getEnumDefect } from "@/api/defect";

const route = useRoute();
const router = useRouter();
const tagColorList = {
  UNRESPONSE: "#EF4444", // 未响应
  UNDO: "#F59E0B", // 待整改
  DOING: "#3B82F6", // 整改中
  DELAY: "#EF4444", // 延期整改
  DONE: "#10B981" // 整改完成
};
const tagBorderColorList = {
  UNRESPONSE: "#FAC7C7", // 未响应
  UNDO: "#FCE2B6", // 待整改
  DOING: "#C6E2FF", // 整改中
  DELAY: "#FAC7C7", // 延期整改
  DONE: "#B7EAD9" // 整改完成
};
const tagBgColorList = {
  UNRESPONSE: "#FEECEC", // 未响应
  UNDO: "#FEF5E6", // 待整改
  DOING: "#ECF5FF", // 整改中
  DELAY: "#FEECEC", // 延期整改
  DONE: "#E8F8F3" // 整改完成
};
const state = reactive<any>({
  isMain: true, // 主页面true 详情页面false
  isView: true, // 查看true 新增/编辑false
  missingLevelList: [],
  missingTypeList: [],
  missingResourceList: [],
  reportUserList: [],
  rectifyStatusList: [],
  missingOwnerList: [],
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "missingId", label: "缺失编号", minWidth: "160", showOverflowTooltip: true, fixed: "left", missingId: true },
    { prop: "missingTypeDesc", label: "缺失类别", minWidth: "80", showOverflowTooltip: true },
    { prop: "missingDesc", label: "缺失描述", minWidth: "200", showOverflowTooltip: false, missingDesc: true },
    { prop: "missingPictureList", label: "缺失照片", minWidth: "140", showOverflowTooltip: false, missingPictureList: true },
    { prop: "missingPositionDescAll", label: "缺失位置", minWidth: "180", showOverflowTooltip: true },
    { prop: "reportUser", label: "上报人", minWidth: "120", showOverflowTooltip: true },
    { prop: "reportTime", label: "上报时间", minWidth: "100", showOverflowTooltip: true, reportTime: true },
    { prop: "missingOwnerName", label: "责任人", minWidth: "120", showOverflowTooltip: true },
    { prop: "rectifyTime", label: "结案时间", minWidth: "100", showOverflowTooltip: true, rectifyTime: true },
    { prop: "rectifyStatus", label: "状态", minWidth: "100", showOverflowTooltip: true, rectifyStatus: true }
  ],
  tableData: [],
  total: 0,
  userId: "",
  reportUserName: "",
  missingId: "",
  systemCodeList: [],
  photoShow: false,
  viewerPhotoList: [],
  positionList: []
});
const {
  isMain,
  isView,
  missingLevelList,
  missingTypeList,
  missingResourceList,
  reportUserList,
  rectifyStatusList,
  missingOwnerList,
  queryParams,
  tableColumns,
  tableData,
  total,
  userId,
  reportUserName,
  missingId,
  systemCodeList,
  photoShow,
  viewerPhotoList
} = toRefs(state);

// 进入页面时触发
onMounted(() => {
  const userInfo = JSON.parse(localStorage.getItem("userInfo"));
  userId.value = userInfo.userId;
  reportUserName.value = userInfo.username + "-" + userInfo.realName;
  if (route?.query && route?.query?.eqpId) {
    queryParams.value.eqpId = route?.query?.eqpId;
  }
  if (route?.query && route?.query?.missingPosition) {
    queryParams.value.missingPosition = route?.query?.missingPosition;
  }
  if (route?.query && route?.query?.missingType) {
    queryParams.value.missingType = route?.query?.missingType;
  }
  isMain.value = true;
  isView.value = true;
  querySelect();
  queryTable();
});
// 获取下拉框
const querySelect = async () => {
  const list = await getEnumDefect();
  missingLevelList.value = Object.keys(list?.MISSING_LEVEL).map((item, index) => ({
    id: index + 1,
    value: item,
    name: list?.MISSING_LEVEL[item]
  }));
  missingTypeList.value = Object.keys(list?.MISSING_TYPE).map((item, index) => ({
    id: index + 1,
    value: item,
    name: list?.MISSING_TYPE[item]
  }));
  missingResourceList.value = Object.keys(list?.MISSING_RESOURCE).map((item, index) => ({
    id: index + 1,
    value: item,
    name: list?.MISSING_RESOURCE[item]
  }));
  rectifyStatusList.value = Object.keys(list?.RECTIFY_STATUS).map((item, index) => ({
    id: index + 1,
    value: item,
    name: list?.RECTIFY_STATUS[item]
  }));
  const data = await getEmployeeIdAndName();
  reportUserList.value = JSON.parse(JSON.stringify(data));
  missingOwnerList.value = JSON.parse(JSON.stringify(data));
};
// 查询备件列表
const queryTable = async () => {
  const params = JSON.parse(JSON.stringify(queryParams.value));
  params.systemCodes = systemCodeList.value;
  const data = await queryDefect(params);
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 图片预览
const photoPreview = (pictures, file) => {
  photoShow.value = true;
  const index = pictures.indexOf(file);
  let viewerList = [...pictures];
  let tempList = [];
  for (let i = 0; i < index; i++) {
    tempList.push(viewerList.shift());
  }
  viewerPhotoList.value = viewerList.concat(tempList).map(file => file.url || file.fileUrl);
};
// 查看详情
const handleView = (row: any) => {
  missingId.value = row.missingId;
  isMain.value = false;
  isView.value = true;
};
// 从新增/编辑、详情返回主页面
const backMainPage = () => {
  isMain.value = true;
};
// 返回缺失管理
const backToDefect = () => {
  router.push("/all/safeManage/defect");
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.table-ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

:deep(.px-image-viewer__wrapper) {
  .px-image-viewer__prev {
    top: calc(100vh - 74px);
    left: calc(50% + 98px);
    transform: translateY(0);
  }

  .px-image-viewer__next {
    top: calc(100vh - 74px);
    left: calc(50% + 150px);
    transform: translateY(0);
  }

  .px-image-viewer__actions {
    left: calc(50% - 52px);
  }
}
</style>
